<!-- html -->
<template>
  <h2 class="h2">{{ title }}</h2>
  <span class="span3">父组件</span>
  <br>
  <span class="span2">text1：</span>
  <input class="input1" v-model="text1">
  <span class="span2">text2：</span>
  <input class="input1" v-model="text2">
  <span class="span2">text3：</span>
  <input class="input1" v-model="text3">
  <hr class="hr1">
  <span class="span3">子组件</span>
  <br>
  <!-- 单个参数 -->
  <vModelTest1Child1 v-model="text1" />
  <br>
  <!-- 多个参数 -->
  <vModelTest1Child2 v-model:text2="text2" v-model:text3="text3" />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'vModelTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref } from 'vue'
import vModelTest1Child1 from '@/components/componenttransmit/VModelTest1Child1.vue'
import vModelTest1Child2 from '@/components/componenttransmit/VModelTest1Child2.vue'
//数据
let title = ref('v-model + props + emits，父组件<=>子组件')
let text1 = ref('hello')
let text2 = ref('world')
let text3 = ref('vue')
</script>

<!-- 样式 -->
<style scoped></style>